<template>
	<view class="mt-20">
		<template v-if="multiple">
			<view class="flex items-center" @click="handleChoose">
				<view class="flex items-center">
					<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden border-2 border-solid border-[#BADEFF]">
						<ImageBoxVue :src="post.member?.headimg"></ImageBoxVue>
					</view>
					<view class="ml-20">
						<text class="text-xs font-bold">{{post.member?.nickname}}</text>
						<view class="flex">
							<view class="bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
								<text class="text-white font-bold">LV.{{post.member?.openlev}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 解读内容 -->
				<view class="flex-1 overflow-hidden relative">
					<view class="flex pl-20 overflow-hidden relative" :class="{'pr-20': post.obs == 1}" v-if="post.sts == 0">
						<text class="flex-1 overflow-hidden multiline-ellipsis">{{post.details}}</text>
						<!-- <view class="lock">sdfsdfsdf</view> -->
					</view>
					<view v-if="post.sts == 1"></view>
				</view>
				<!-- 解读评论 -->
				<!-- <view class=" ml-20" v-if="post.obs == 1"> -->
				<view class="ml-20">
					<ImageBoxVue v-if="chooseArr.indexOf(post.id) > -1" src="/static/icons/selected.png" width="36rpx"
						height="36rpx"></ImageBoxVue>
					<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
					</ImageBoxVue>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="flex items-center">
				<!-- 主播（用户）信息 -->
				<view class="flex items-center" v-if="userType == 1">
					<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden border-2 border-solid border-[#BADEFF]">
						<ImageBoxVue :src="post.anchor?.headimg"></ImageBoxVue>
					</view>
					<view class="ml-20">
						<text class="text-xs font-bold">{{post.anchor?.name}}</text>
						<view class="bg-[#D7F0FF] p-4 mt-10">
							<text class="text-[#3689C6]">{{jobQuery(post.anchor)}}</text>
						</view>
					</view>
				</view>
				<view class="flex items-center" v-if="userType == 2">
					<view class="w-[100rpx] h-[100rpx] rounded-lg overflow-hidden border-2 border-solid border-[#BADEFF]">
						<ImageBoxVue :src="post.member?.headimg"></ImageBoxVue>
					</view>
					<view class="ml-20">
						<text class="text-xs font-bold">{{post.member?.nickname}}</text>
						<view class="flex">
							<view class="bg-gradient-to-r from-[#FF9562] to-[#FFBB55] py-4 px-8 rounded-sm">
								<text class="text-white font-bold">LV.{{post.member?.openlev}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 解读内容 -->
				<view class="flex-1 overflow-hidden">
					<view class="flex pl-20 overflow-hidden relative" :class="{'pr-20': post.obs == 1}" v-if="post.sts == 0">
						<text class="flex-1 overflow-hidden" :class="[post.buy==0?'multiline-ellipsis':'']">{{post.details}}</text>
						<view class="lock1" :class="[obs!=1?'lock2':'']" v-if="post.buy == 0" @click="handleLock">
							<view class="relative z-10">
								<text class="text-[#329EFF] pr-20">3钻解锁文字内容</text>
							</view>
						</view>
					</view>
					<view v-if="post.sts == 1">
						<view class="rounded-full bg-gradient-to-b from-[#94F2FF] to-[#34D3DD] flex justify-center p-20"
							v-for="(item, idx) in post.voiceArr" :key="idx" @click="playAudio(item)">
							<view class="icon-voice" v-if="item.playing"></view>
							<ImageBoxVue src="/static/user/icon_voice3.png" width="28rpx" height="30rpx" v-else></ImageBoxVue>
							<text class="text-white ml-10 font-lg font-bold">{{item.time}}''</text>
							<text class="text-white ml-30 font-lg font-bold" v-if="post.buy == 0">可用3钻石收听</text>
						</view>
					</view>
				</view>
				<!-- 解读评论 -->
				<!-- <view class=" ml-20" v-if="post.obs == 1"> -->
				<view class="ml-20" v-if="obs == 1">
					<view class="flex items-center" @click="handleShowCounent">
						<ImageBoxVue src="/static/icons/msg.png" width="32rpx" height="32rpx"></ImageBoxVue>
						<text class="ml-10 text-[#416279]" v-if="post.pins <= 99">{{post.pins || 0}}</text>
						<text class="ml-10 text-[#416279]" v-else>99+</text>
					</view>
					<view class="mt-10 px-20 bg-[#329EFF] text-white rounded-lg" @click="handleAdd" v-if="type != 1">回复</view>
				</view>
			</view>
		</template>
		<!-- 解读评论 -->
		<view class="mt-20 px-20" v-if="showCounent">
			<view class="box-counent py-20" v-for="(item, idx) in contentList" :key="idx">
				<view class="flex items-start" v-if="item.member?.ach == 1">
					<view class="w-72 h-72 rounded-lg overflow-hidden border-2 border-solid border-[#BADEFF]">
						<ImageBoxVue :src="item.member?.anchor.headimg"></ImageBoxVue>
					</view>
					<view class="flex-1 ml-20">
						<view class="text-[#666666]">{{item.member?.anchor.name}}</view>
						<view class="mt-10 text-[#333333]">{{item.content}}</view>
					</view>
				</view>
				<view class="flex items-start" v-else>
					<view class="w-72 h-72 rounded-lg overflow-hidden border-2 border-solid border-[#BADEFF]">
						<ImageBoxVue :src="item.member?.headimg"></ImageBoxVue>
					</view>
					<view class="flex-1 ml-20">
						<view class="text-[#666666]">{{item.member?.nickname}}</view>
						<view class="mt-10 text-[#333333]">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="center">
			<view class="bg-white rounded-lg p-30 mx-30 w-[690rpx]">
				<view class="text-center text-lg font-bold text-[#666666]">评论解读</view>
				<view class="flex justify-center items-center mt-30">
					<uni-easyinput v-model="contentStr" type="textarea" placeholder="请输入"></uni-easyinput>
				</view>
				<view class="bg-[#329EFF] text-white rounded-lg p-20 text-center mt-40 text-md" @click="handleSubmit">提交</view>
			</view>
		</uni-popup>
		<uni-popup ref="confirmDialogRef" type="dialog">
			<uni-popup-dialog type="warn" cancelText="否" confirmText="是" title="提示" content="确定要购买解读吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		computed,
		onMounted,
	} from 'vue';
	import {
		jobQuery
	} from '@/config/publicFun';
	import userApi from '@/apis/apiList/userApi';

	const {
		post,
		type,
		userType,
		multiple,
		modelValue,
		obs,
	} = defineProps(['post', 'type', 'userType', 'multiple', 'modelValue', 'obs'])
	// type 1、列表 2、详情 3、预览  userType 1、主播 2、游客  obs 1、 允许评论 2、不允许评论

	const emit = defineEmits(['send', 'showView', 'update:modelValue', 'upDateData'])

	const popupRef = ref(null)
	const contentStr = ref('')
	const contentList = ref([])
	const showCounent = ref(false)
	const chooseArr = ref([])
	const audioCtx = ref(null)
	const confirmDialogRef = ref(null)

	onMounted(() => {
		chooseArr.value = modelValue
	})

	const handleLock = () => {
		confirmDialogRef.value.open()
	}

	const playAudio = (val) => {
		if (post.buy == 0) {
			confirmDialogRef.value.open()
		} else {
			if (val.playing) {
				audioCtx.value.stop();
				val.playing = false
				audioCtx.value = null
			} else {
				val.playing = true
				audioCtx.value = uni.createInnerAudioContext();
				audioCtx.value.src = val.url; // 在线音频地址
				audioCtx.value.play();
				audioCtx.value.onEnded(() => {
					val.playing = false
				})
			}
		}
	}
	const dialogConfirm = () => {
		handleBuy()
	}

	const dialogClose = () => {
		confirmDialogRef.value.close()
	}
	const handleBuy = () => {
		let opt = {
			"answer.id": post.id,
			"member.id": uni.getStorageSync('user').id,
			sts: post.poss.paysts
		}
		userApi.memberBuyAnswer(opt).then(res => {
			emit('upDateData')
		})
	}

	const getCountentList = () => {
		const opt = {
			pid: post.id,
			sts: 0
		}
		userApi.getPingluenlistAtsts(opt).then(res => {
			contentList.value = res.data
		})
	}

	const handleChoose = () => {
		const idx = chooseArr.value.indexOf(post.id)
		if (idx > -1) {
			chooseArr.value.splice(idx, 1)
		} else {
			chooseArr.value.push(post.id)
		}
		emit('update:modelValue', chooseArr.value)
	}

	const handleShowCounent = () => {
		if (type == 1) {
			return
		}
		showCounent.value = !showCounent.value
		if (showCounent.value) {
			getCountentList()
		}
	}

	const handleAdd = () => {
		popupRef.value.open()
	}

	const handleSubmit = () => {
		if (!contentStr.value) {
			uni.showToast({
				icon: 'none',
				title: '请输入评论内容'
			})
			return
		}
		const opt = {
			"member.id": uni.getStorageSync('user').id,
			sts: 0,
			pid: post.id,
			content: contentStr.value
		}
		console.log(opt)
		userApi.addPinglun(opt).then(res => {
			uni.showToast({
				icon: 'none',
				title: '评论成功'
			})
			popupRef.value.close()
			getCountentList()
			emit('upDateData')
		})
	}
</script>

<style lang="scss" scoped>
	.box-counent {
		border-bottom: 2rpx solid #eee;

		&:last-child {
			border-bottom: 0;
		}
	}

	.lock1,
	.lock2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;

		&:before {
			content: '';
			position: absolute;
			right: 0;
			bottom: 0;
			top: 0;
			left: 0;
			background: linear-gradient(-10deg, rgba(221, 232, 252, 1), rgba(221, 232, 252, 1) 50%, transparent 50%, transparent 100%);
		}
	}

	.lock2 {
		&:before {
			content: '';
			position: absolute;
			right: 0;
			bottom: 0;
			top: 0;
			left: 0;
			background: linear-gradient(-8deg, rgba(221, 232, 252, 1), rgba(221, 232, 252, 1) 50%, transparent 50%, transparent 100%);
		}
	}

	.icon-voice {
		animation-name: voiceExample;
		/* 引用上面定义的@keyframes */
		animation-duration: 3s;
		/* 动画持续时间 */
		animation-iteration-count: infinite;
		/* 无限循环 */
		background: url(/static/user/icon_voice1.png) no-repeat;
		background-size: contain;
		width: 28rpx;
		height: 30rpx;
	}

	@keyframes voiceExample {
		0% {
			background: url(/static/user/icon_voice1.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		50% {
			background: url(/static/user/icon_voice2.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		100% {
			background: url(/static/user/icon_voice3.png) no-repeat;
			background-size: cover;
			width: 28rpx;
			height: 30rpx;
		}
	}
</style>